import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.qmlmodels

Rectangle {
    width: 300
    height: 400
    color: "#f0f0f0"

    ListView {
        id: listView
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10
        clip: true

        model: ListModel {
            ListElement { itemType: "header"; title: "项目列表"; subtitle: "包含多种类型的项目" }
            ListElement { itemType: "content"; title: "内容项目 1"; description: "这是一个普通的内容项"; importance: "normal" }
            ListElement { itemType: "content"; title: "重要项目"; description: "这是一个重要的内容项"; importance: "high" }
            ListElement { itemType: "footer"; summary: "共计 3 个项目" }
        }
        
        delegate: DelegateChooser {
            role: "itemType"    //ListElement中的指定属性
            
            DelegateChoice {
                roleValue: "header" //匹配对应属性的值
                delegate: Rectangle {
                    width: ListView.view.width
                    height: 80
                    color: "#4CAF50"
                    radius: 8

                    ColumnLayout {
                        anchors {
                            fill: parent
                            margins: 10
                        }
                        spacing: 5

                        Text {
                            text: model.title
                            color: "white"
                            font {
                                bold: true
                                pixelSize: 20
                            }
                            Layout.fillWidth: true
                        }
                        Text {
                            text: model.subtitle
                            color: "white"
                            font.pixelSize: 14
                            Layout.fillWidth: true
                        }
                    }
                }
            }

            DelegateChoice {
                roleValue: "content"
                delegate: Rectangle {
                    width: ListView.view.width
                    height: 70
                    radius: 6
                    
                    property bool isHighImportance: model.importance === "high"
                    
                    color: isHighImportance ? "#FFF3E0" : "white"
                    border {
                        color: isHighImportance ? "#FF9800" : "#E0E0E0"
                        width: 1
                    }

                    ColumnLayout {
                        anchors {
                            fill: parent
                            margins: 10
                        }
                        spacing: 5

                        Text {
                            text: model.title
                            font {
                                bold: isHighImportance
                                pixelSize: 16
                            }
                            color: isHighImportance ? "#F57C00" : "black"
                            Layout.fillWidth: true
                        }
                        Text {
                            text: model.description
                            font.pixelSize: 14
                            color: "#666666"
                            Layout.fillWidth: true
                        }
                    }
                }
            }

            DelegateChoice {
                roleValue: "footer"
                delegate: Rectangle {
                    width: ListView.view.width
                    height: 50
                    color: "#EEEEEE"
                    radius: 4

                    Text {
                        anchors.centerIn: parent
                        text: model.summary
                        font.pixelSize: 14
                        color: "#666666"
                    }
                }
            }
        }
    }
} 
